<template>
	<view class="work">
		<headTop>
			<uv-navbar title="工单列表" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="search">
			<uv-search placeholder="请输入订单编号" v-model="params.order_no" @search="getList" :clearabled="true"
				:showAction="false" bgColor="rgba(255,255,255, .3)"></uv-search>
		</view>
		<view class="tabs">
			<uv-tabs :list="sortList" :lineColor="`url(${iconImg}) 100% 100%`" lineHeight="6"
				:scrollable="false"></uv-tabs>
		</view>

		<view class="steps">
			<uv-cell-group>
				<uv-cell v-for="item in workList" :key="item.id" :title="item.title" :value="sortList[item.status].name"
					:label="item.created_at" :center="true" @tap="toWorkDetails(item.id)"></uv-cell>
			</uv-cell-group>
		</view>
		<view v-if="isBottom">
			<uv-divider text="已经到底了"></uv-divider>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import headTop from "@/components/headTop/index.vue";

	/* ------------------------------------------------------获取数据------------------------------------------------- */
	const params = ref<any>({
		page: 1,
		limit: 15,
		order_no: "",
		status: 0
	});

	import { workApi } from "@/api/index";
	const workList = ref<any>([]);
	const isBottom = ref(false);
	const getList = async () => {
		try {
			const res = await workApi.getlist(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			workList.value = [...workList.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* ------------------------------------------------------------下拉加载------------------------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});

	/* --------------------------------------------------------横向tabs------------------------------------------------ */
	const sortList = ref([
		{ name: "待处理", status: 0 },
		{ name: "处理中", status: 1 },
		{ name: "待回复", status: 2 },
		{ name: "已解决", status: 3 },
		{ name: "已关闭", status: 4 }
	]);

	const workStatus = (status : number) => {
		if (status == 0) {
			return "待处理";
		} else if (status === 1) {
			return "处理中";
		} else if (status === 2) {
			return "待回复";
		} else if (status === 3) {
			return "已解决";
		} else if (status === 4) {
			return "已关闭";
		}
	};

	/* ------------------------------------------------------------tabs图标------------------------------------------------- */
	import { getIcon } from "@/utils/index";
	const { iconImg } = getIcon();

	/* ------------------------------------------------------------跳转上一页----------------------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	const toWorkDetails = (id) => {
		uni.navigateTo({
			url: `/pages/workDetails/workDetails?id=${id}`
		});
	};
</script>

<style lang="scss">
	.work {
		.steps {
			margin-top: 2vw;

			.uv-cell-group {
				background-color: rgba(255, 255, 255, 0.6) !important;
				border-radius: 2vw !important;
			}
		}
	}
</style>